<template>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="align-center">
  <el-table
    :data="tableData"
    border
    max-height="450"
    style="width: 100%;">
    <el-table-column
      prop="sourceId"
      label="数据源id">
    </el-table-column>
    <el-table-column
      prop="dbname"
      label="数据db">
    </el-table-column>
      <el-table-column
        prop="tablename"
        label="数据table">
      </el-table-column>
    <el-table-column
      prop="columnname"
      label="数据column">
    </el-table-column>
    <el-table-column
      prop="ruleType"
      label="规则类型">
    </el-table-column>
    <el-table-column
      prop="isValid"
      label="是否生效"
      :formatter="formatter"
    >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button v-if="scope.row.isValid == '0'" @click="excuteValid(scope.row)" size="small">规则生效</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
  </div>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          tableData: [{
            dname: '2016-05-02',
            dtype: '王小虎',
            dadress: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      },
      methods: {
        formatter(row, column) {
          let isValid = row.isValid
          if(isValid == 0){
            return "未生效"
          }else if (isValid == 1){
            return "已经生效"
          }
          return "状态异常";
        },
        excuteValid(row){
          var _myvue = this
          this.$http.post('http://127.0.0.1:8091/dataRule/updateValidStatus',
            {
              id:row.id,
              isValid:1,
            }
            ,{emulateJSON: true}).then((response) => {
              if(response.body.flag == 'success'){
                alert("已经生效")
                this.$http.post('http://127.0.0.1:8091/dataRule/findAll',
                  {
                  }
                  ,{emulateJSON: true}).then((response) => {
                  // if(response.bodyText = "success"){
                  _myvue.tableData = response.body
                  _myvue.tableData.forEach(item => {
                    if(item.ruleType == 1){
                      item.ruleType = '空值校验'
                    }else if(item.ruleType == 2){
                      item.ruleType = '唯一性校验'
                    }else if(item.ruleType == 3){
                      item.ruleType = '日期合法性校验'
                    }else if(item.ruleType == 5){
                      item.ruleType = '值包含校验'
                    }

                  })
                });
              }else{
                alert("生效失败")
              }
            // if(response.bodyText = "success"){

          });
        }
       },
      created() {
        this.$http.post('http://127.0.0.1:8091/dataRule/findAll',
          {
          }
          ,{emulateJSON: true}).then((response) => {
          // if(response.bodyText = "success"){
          this.tableData = response.body
          this.tableData.forEach(item => {
            if (item.ruleType == 1) {
              item.ruleType = '空值校验'
            } else if (item.ruleType == 2) {
              item.ruleType = '唯一性校验'
            } else if (item.ruleType == 3) {
              item.ruleType = '日期合法性校验'
            } else if (item.ruleType == 5) {
              item.ruleType = '值包含校验'
            }
          })
        });
      }
    }
</script>

<style type="text/css">
  .align-center{
    margin:0 50px;      /* 居中 这个是必须的，，其它的属性非必须 */
    width:1200px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    background:white;     /* 背景色 */
    text-align:center;  /* 文字等内容居中 */
  }
</style>
